<!--上传插件-->

<!--<link href="/static/css/framework-font.css" rel="stylesheet"/>-->
<!--<script src="/static/js/jquery-2.1.1.js"></script>-->
<!--<script src="/static/bootstrap/js/bootstrap.js"></script>-->
<!--<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>-->

<!--<link href="/static/layui/css/layui.css" rel="stylesheet"/>-->
<!--<script src="/static/layui/layui.js"></script>-->
<!--&lt;!&ndash;引用layui弹框插件&ndash;&gt;-->

<!--<script src="/static/js/yii.js"></script>-->

<!--<link href="/static/css/fileinput.css" rel="stylesheet"/>-->
<!--<script src="/static/js/fileinput.js"></script>-->
<!--<script src="/static/js/fileinput_locale_zh.js" type="text/javascript"></script>-->

<!--<link href="/static/css/default/public.css" rel="stylesheet" type="text/css"/>-->


<!--<script src="/static/build/tracking-min.js"></script>-->
<!--<script src="/static/build/data/face-min.js"></script>-->
<!--<script src="/static/build/data/eye-min.js"></script>-->
<!--<script src="/static/build/data/mouth-min.js"></script>-->

<div class="modal-header">

    <div class="assistant_header">
        <button type="button" class="close" data-dismiss="modal" close="true">
            <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title">
            <span class="fa fa-legal"></span>&nbsp;人脸录入
        </h4>
    </div>
</div>
<style>
    .modal-dialog{width:600px!important;}
    .faceview{padding-bottom:15px;}
    .faceview-amin{text-align: center;position: relative}
    #canvas{position: absolute;right:0px;width:200px!important;height:200px;}
    #video{
        width: 500px;
        height:500px;
        /*margin: 50px auto;*/
        margin: auto;
        background-color:#fff;
        display: block;
    }
    .rect {
        border: 2px solid #a64ceb;
        left: -1000px;
        position: absolute;
        top: -1000px;
    }
    .assistant_button{text-align: right}
</style>
<div class="modal-body">



    <div class="faceview form-group">

        <div class="row form-group faceview-amin" >
            <div class="col-sm-12 demo-container" >

                <canvas id="canvas" ></canvas>

                <video id="video" autoplay="autoplay"></video>

                <input type="hidden" name="canvas_img" id="canvas_img" value="">

            </div>
        </div>

        <div class="row faceview-amin">
            <div class="col-sm-12" >
                <a href="javascript:;" class="btn-sm btn-primary" id="snap" onclick="takePhoto()">拍照</a>
            </div>
        </div>

        <!--    <canvas id="canvas" width="300px" height="400px"></canvas>-->

    </div>



    <div class="assistant_button" style="display: block">
        <button type="button" class="layui-btn layui-btn-primary js_quit" close="true">取消</button>
        <button type="button" class="layui-btn js_save" >保存</button>
        <button style="display: none" type="button" class="layui-btn js_add" _event="face_add" >保存</button>
    </div>


</div>


<script>

    var img = new Image();
    img.crossOrigin = '';
    $(".js_save").click(function () {
            $(".js_add").click();
            $(".js_quit").click();
        })


        var is_ok = 0;
        var video = document.getElementById('video');
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia({video : {width:800, height:800}}).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia({video : {width: 800, height: 800}},success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia({video : {width: 800, height: 800}}, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia({video : {width: 800, height: 800}}, success, error);
        }

        function success(stream) {
            //兼容webkit核心浏览器
            // let CompatibleURL = window.URL || window.webkitURL;

            //将视频流设置为video元素的源
            console.log(stream);

            //video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        }

        function error(error) {
            console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
        }

        //,'eye', 'mouth'
        var tracker = new tracking.ObjectTracker(['face']);
        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1);

        tracking.track('#video', tracker);

        tracker.on('track', function(event) {
            event.data.forEach(function(rect) {
                window.plot(rect.x, rect.y, rect.width, rect.height);
            });
        });

        window.plot = function(x, y, w, h) {
            //删除其他相同div
            $('.demo-container>div').remove()
            var rect = document.createElement('div');
            document.querySelector('.demo-container').appendChild(rect);
            rect.classList.add('rect');
            rect.style.width = w + 'px';
            rect.style.height = h + 'px';
            rect.style.left = (video.offsetLeft + x) + 'px';
            rect.style.top = (video.offsetTop + y) + 'px';

            is_ok = 1;
            setInterval(function(){
                $('.demo-container>div').remove();
                is_ok = 0;
            },2000);

        };

        function takePhoto() {
            /*if(is_ok==0){
                alert("暂未获取到人脸头像");
                return;
            }*/
            document.getElementById("canvas").width=400;
            document.getElementById("canvas").height=400;
            //获得Canvas对象
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext('2d');
            //ctx.drawImage(video, 0, 0,300,150);
            ctx.drawImage(video, 0, 0,400,400)
            var photoSrc = document.getElementById("canvas").toDataURL("image/jpeg",0.5);
            $("#canvas_img").val(photoSrc);
        }


</script>